<template>
    <n-descriptions class="userInfo-descriptions" label-placement="left" label-align="center" bordered :column="1">

        <n-descriptions-item label="uid" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ userInfo.uid }}
        </n-descriptions-item>

        <n-descriptions-item label="用户名" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ userInfo.username }}
        </n-descriptions-item>

        <n-descriptions-item label="加入时间" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ moment(userInfo.joinDate).format('YYYY-MM-DD HH:mm:ss') }}
        </n-descriptions-item>

        <n-descriptions-item label="等级" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ formatLevel(userInfo.level) }}&nbsp;&nbsp;
            <n-tooltip placement="top-start" trigger="hover">
                <template #trigger>
                    <n-icon :component="Info12Regular" />
                </template>
                当天累计听歌时长：{{ calNextLevel(userInfo.level).day }}天。
                {{ calNextLevel(userInfo.level).nextLevlInfo }}
            </n-tooltip>
        </n-descriptions-item>

        <n-descriptions-item label="更新时间" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ moment(userInfo.loginDate).format('YYYY-MM-DD HH:mm:ss') }}
        </n-descriptions-item>

        <n-descriptions-item label="ip" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ userInfo.ip }}
        </n-descriptions-item>

        <n-descriptions-item label="客户端" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ userInfo.client }}
        </n-descriptions-item>

        <n-descriptions-item label="云盘空间" label-style="font-size:1.2rem" content-style="font-size:1.2rem;display:flex;align-items: center;">
            {{ bytesToSize(userInfo.cloundSize) + ' / ' + bytesToSize(userInfo.useCloundSize) }}
        </n-descriptions-item>

    </n-descriptions>

    <div class="userInfo-options">
        <n-button type="primary" ghost disabled @click="">注销账号</n-button>
        <n-button type="primary" ghost @click="exitAccount">退出登陆</n-button>
    </div>
</template>
    
<script setup lang='ts'>
import { userInfoStore, usePlayConfigStore } from '../../store'
import { bytesToSize, formatLevel, calNextLevel } from '../../util/calculate'
import { Info12Regular } from '@vicons/fluent'
import moment from 'moment'
import { useRouter } from 'vue-router'
import { updateUserLevel } from '../../ajax/index'


const router = useRouter()
const usePlayConfig = usePlayConfigStore()
const userInfo = userInfoStore()


// 退出登录
const exitAccount = async () => {
    await updateUserLevel(usePlayConfig.playTime)
    usePlayConfig.changePlayTime(0)
    userInfo.clearUserInfo()
    router.push({ name: `${usePlayConfig.playListMode}` })
}

</script>
    
<style scoped lang="less">
.userInfo-descriptions {
    width: 80%;
    height: 450px;
    margin-bottom: 20px;
}

.userInfo-options {
    display: flex;
    justify-content: space-around;
    width: 100%;
}
</style>